<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="posts"></ul>
    <script>
        //fetch post
        //
        // 由异步变同步
    /*let posts = [];
    let users = [];

    // 封装 dry原则
    function ajax(url,cb) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.send();
        xhr.addEventListener('readystatechange', function(event) {
            if (event.target.readyState === 4) { 
                let data = JSON.parse(event.target.responseText);
                // 嵌套
                console.log(data)
                cb();
            }
        })
    }
    // 使用回调函数, 实现异步任务嵌套，异步任务同步化，控制代码的执行流程
    ajax('http://127.0.0.1:3000/posts', () =>{
        ajax('http://127.0.0.1:3001/user', () =>{
            ajax('http://127.0.0.1:3000/posts/1/comments', () =>{
            console.log('The work is over');
        })
        })
    })*/
        fetch('http://127.0.0.1:3000/posts')
        // 二进制文件流
        .then(data=>data.json())
        .then(data => {
            posts = [...data];// 扩展运算符
            //console.log(data)
        fetch('http://127.0.0.1:3001/user')
        // 二进制文件流
        .then(data => data.json())
        .then(data =>{
            users = [...data];
            console.log(posts,users,'....')
        })
    })
        // 前端拉取数据API xhr 对象
        // const xhr = new XMLHttpRequest();
        // xhr.open("GET","http://127.0.0.1:3000/posts",true)
        // xhr.send()// 发送请求
        // // http 请求响应式
        // xhr.addEventListener('readystatechange',function(event){
        //     console.log(event);
        //     if(event.target.readyState === 4){
        //         document.getElementById('posts').innerHTML = 
        //         JSON.parse(event.target.responseText).map(item=>`
        //         <li>
        //             ${item.id} ${item.title}  ${item.author};
        //             </li>
        //             `);
        //     }

        // })
        // 前端拉去数据API
      //  fetch('http//127.0.0.1:3000/posts')
        // 二进制文件流
       // .then(data=>data.json())
        //.then(data=>{
            //console.log(data)
       // })
    </script>
</body>
</html>